<template>
	<view>
		<view class="uni-tab-bar">
			<scroll-view scroll-x class="uni-swiper-tab" scroll-with-animation :scroll-left="scrollLeft">
				<block v-for="(tab,index) in tabBars" :key="index">
					<view class="swiper-tab-list" :class="{'active':tabIndex==index}" @tap="tabtap(index)" :id="'top'+ index">
						{{tab}}
					</view>
				</block>
			</scroll-view>
		</view>
		<swiper class="swiper-box" :style="{height:swiperHeight + 'px'}" :current="tabIndex" @change='tabChange'>
			<swiper-item style="background-color: #007AFF;">
				a
			</swiper-item>
			<swiper-item style="background-color: #007AFF;">
				b
			</swiper-item>
			<swiper-item style="background-color: #007AFF;">
				c
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperHeight: 0,
				scrollLeft: 0,
				tabBars:[],
				tabIndex: 0,
				tabBars:["全部","用户故事","新农视角","参考案例","参考案例","参考案例","参考案例"],
				data:{
					0:{
						type:"类型",
						num:"1"
					},
					1:{
						type:"类型2",
						num:"2"
					}
				}
			}
		},
		onLoad() {
			console.log(this.data)
			//获取屏幕可使用高度
			try {
			    const res = uni.getSystemInfoSync();
			   console.log(res)
			   this.swiperHeight = res.windowHeight - uni.upx2px(100)
			   console.log(uni.upx2px(100))
			} catch (e) {
			    // error
			}
			// uni.getSystemInfoSync()({
			// 	success: (res) => {
					
			// 	}
			// });
		},
		onReady() {
			this.zixun();
		},
		methods: {
			//
			async zixun(){
				let res =await this.$http({
					url:"/app/user/appChangeGetPublicKey"
				})
				console.log(res)
			},
			//滑动监听事件
			tabChange(e) {
				this.tabIndex = e.detail.current;
				this.scrollLeft = (e.detail.current - 1) * 60;
			},
			// 顶部选项卡选中
			tabtap(e) {
				this.tabIndex = e;
				this.scrollLeft = (e - 1) * 60
			},
		}
	}
</script>

<style lang="less" scoped>
	.uni-swiper-tab {
		width: 100%;
		white-space: nowrap;
		line-height: 100rpx;
		height: 100rpx;
		 border-bottom: 0px solid #c8c7cc; 
	}
.uni-swiper-tab .active {
		padding-bottom: 15rpx;
		border-bottom: 2px solid #34AB68;
	}
</style>
